<template>
    <div class="Job-detail">
        <div class="first-row">
            <span class="select">
                <el-select v-model="user_id" placeholder="请选择" @change="changeName">
                    <el-option v-for="item in user_list" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                </el-select>
            </span>
            <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeTime">
            </el-date-picker>
        </div>
        <div class="second-row">
            <span>累计工天：{{ user_table.total_work_days }}</span>
            <span>工资：{{ user_list.total_salary }}</span>
            <span>借支：{{ user_list.total_borrow }}</span>
            <span>其他费用：{{ user_list.total_expenditure }}</span>
        </div>
        <el-row>
            <el-col :span=9>
                <h3>工序统计表</h3>
                <el-table :data="user_table.salary_list" style="width: 100%">
                    <el-table-column prop="name" label="项目名称" width="180">
                    </el-table-column>
                    <el-table-column prop="type" label="工序" width="180">
                    </el-table-column>
                    <el-table-column prop="total_work_days" label="工天">
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span=15>
                <h3>打卡详情表</h3>
                <el-table :data="user_table.attendance_list" style="width: 100%">
                    <el-table-column prop="name" label="项目名称" width="180">
                    </el-table-column>
                    <el-table-column prop="date" label="时间" width="180">
                    </el-table-column>
                    <el-table-column prop="location" label="地点">
                    </el-table-column>
                    <el-table-column prop="days" label="工天">
                    </el-table-column>
                    <el-table-column prop="square_meter" label="平方米">
                    </el-table-column>
                    <el-table-column prop="type" label="类型">
                    </el-table-column>
                    <el-table-column prop="" label="姓名">
                    </el-table-column>
                    <el-table-column prop="" label="审核人">
                    </el-table-column>
                    <el-table-column prop="admin_approved" label="状态">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span=12>
                <h3>预支表</h3>
                <el-table :data="user_table.borrow_list" style="width: 100%">
                    <el-table-column prop="" label="姓名" width="180">
                    </el-table-column>
                    <el-table-column prop="" label="时间" width="180">
                    </el-table-column>
                    <el-table-column prop="" label="预支付">
                    </el-table-column>
                    <el-table-column prop="" label="描述">
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span=12>
                <h3>其他费用表</h3>

            </el-col>
        </el-row>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            user_list: [],
            user_id: '',
            time: '',
            user_table: [],
        };
    },
    methods: {
        changeTime() {
            this.$http.get(`/admin/auth/getUserDetail?user_id=${this.user_id}?start_time=${this.start_time}?end_time=${this.end_time}`,).then(res => {
                if (res.data.status == 200) {
                    this.user_table = res.data.data
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
        changeName() {
            this.$http.get(`/admin/auth/getUserDetail?user_id=${this.user_id}?start_time=${this.start_time}?end_time=${this.end_time}`,).then(res => {
                if (res.data.status == 200) {
                    this.user_table = res.data.data
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
        getUserList() {
            this.$http.get('/admin/auth/getUser').then(res => {
                if (res.data.status == 200) {
                    this.user_list = res.data.data
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.message
                    })
                }
            })
        },
    },
    computed: {

    },
    created() {
        this.getUserList()
    }
}
</script>
<style scoped lang="less">
h3 {
    text-align: center;
    margin-top: 10px;
}

.first-row {
    margin: 10px 0 0 300px;

    .select {
        margin-right: 50px;
    }
}

.second-row {
    margin: 10px 0 0 400px;

    span {
        margin-left: 50px;
    }
}</style>